<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            list-style: none;
            text-align: center;
            color: white;
        }
        .contiver{
            width: 190px;
            height: 260px;
            margin: auto;
            margin-top: 150px;
            background-image:url(4a15d8883775742e3efbb850ae14def7.png);
        }
        h1{
            display: block;
            padding-top: 35px;
        }
        p{
            margin-top: 90px;
            font-size: 14px;
            font-weight:900;
        }
        ul{
            width: 150px;
            margin: auto;
            overflow: hidden;
            margin-left: -13px;
        }
        ul li{
            float: left;
            width: 30px;
            height: 30px;
            background: #2f3430;
            line-height: 30px;
            font-weight: 900;
            font-size: 18px;
        }
        ul span{
            float: left;
            margin: 0px 10px;
        }

    </style>
</head>
<body>
<div class="contiver">
    <h1>京东秒杀</h1>
    <p><span id="h"></span>：00点场 倒计时</p>
    <ul>
        <li>00</li>
        <span>:</span>
        <li class="h"></li>
        <span>:</span>
        <li class="s"></li>
    </ul>
</div>

<script>
    var d=new Date();
    h=1+d.getHours();
    console.log(h);
    if(h==25){
        h=0
    };
    if (h<10){
        h="0"+h
    };
    shi=document.querySelector("#h");
    shi.innerHTML=h;
    fen=document.querySelector(".h");
    miao=document.querySelector(".s");
    var t=setInterval(function () {
        var ss=new Date();
        f=60-ss.getMinutes();
        if(f<10){
            f="0"+f
        };
        fen.innerHTML=f;
        m = 60-ss.getSeconds();
        if (m < 10) {
            m = "0" + m
        };
        miao.innerHTML = m;
    },1000);
    
</script>

</body>
</html>